<template>
  <div>
    <el-card class="report" style="border-radius: 20px" shadow="hover">
      <!-- 主体部分 -->
      <div class="detail" flex justify-between>
        <!-- 左侧 -->
        <div class="report-body-left" flex>
          <div class="report-img">
            <img :src="reportMessage.img" w-50 h-50 b-rd-10 />
          </div>
          <div class="report-message" flex-col-center ml-10 mt-5>
            <div class="report-name" flex>
              <h3>{{ reportMessage.name }}</h3>
              <div class="report-name-abbr" text-gray p-3 h-18 text-10 ml-5>
                <span>{{ reportMessage.nameAbbr }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="report-body-right">
          <div class="report-id">No.{{ reportMessage.id }}</div>
        </div>
      </div>

      <!-- 底部部分 -->
      <template #footer>
        <div class="result" flex text-14>
          <div class="left">
            <span font-bold>服务对象:</span>
            {{ reportMessage.object }}</div>
          <div class="left">
            <span font-bold>服务ID:</span>
            {{ reportMessage.objectId }}</div>
          <div class="left">
            <span font-bold>开始时间:</span>
            {{ reportMessage.startTime }}
          </div>
          <div class="left">
            <span font-bold>描述:</span>
            {{ reportMessage.describe }}
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { defineProps} from "vue";

const props = defineProps({
  reportMessage: { type: Object, required: true },
});
console.log(props.reportMessage);

</script>

<script>
/**
 * 报告卡片
 * 负责人：唐诗轶
 */
export default {
  name: "ReportCard",
};
</script>

<style lang="scss" scoped>
.report-name-abbr {
  border: 1px solid rgba(0, 0, 0, 10%);
  border-radius: 5px;
}

.report-id {
  background: radial-gradient(
    circle at 18.7% 37.8%,
    rgb(250, 250, 250) 0%,
    rgb(225, 234, 238) 90%
  );
}
.result{
  display: flex;
  flex-direction: column;
}
.left{
  margin-bottom: 10px;
}
</style>
